<template>
  <div :style="{ height: nowheight, width: nowwidth }">
    <Echart v-if="chartstau" :options="options" :style="{ height: nowheight, width: nowwidth }" />
  </div>
</template>

<script>
import Echart from "../../baseMain/index.vue";
export default {
  components: {
    Echart
  },
  props: {
    nowwidth: {
      type: String,
      default: () => "300px"
    },
    nowheight: {
      type: String,
      default: () => "200px"
    },
    cdata: {
      type: Object,
      default: () => ({})
    },
    yAxis: {
      type: Array,
      default: () => {
        return [
          {
            type: "value",
            axisLabel: {
              fontSize: 10,
              color: '#fff'
            },
            min: 0,
            axisLine: {
              lineStyle: {
                color: '#05EBDB'
              }
            }
          }
        ];
      }
    }
  },
  data() {
    return {
      chartstau: true,
      options: {}
    };
  },
  watch: {
    cdata: {
      handler(newData) {
        this.resetsty();
        this.options = {
          color: [
            "#5B8FF9",
            "#5AD8A6",
            "#F6BD16",
            "#ffdb5c",
            "#ff9f7f",
            "#32c5e9",
            "#fb7293",
            "#e7bcf3"
          ],
          // tooltip: {
          //   trigger: "axis"
          // },
          tooltip: {
            show: true, // 是否显示
            trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
            axisPointer: { // 坐标轴指示器配置项。
              type: 'line', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
              axis: 'auto', // 指示器的坐标轴。
              snap: true // 坐标轴指示器是否自动吸附到点上
            },
            renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
            confine: true,
            backgroundColor: '#ffffff', // 提示框浮层的背景颜色。
            // : '100%', // 提示框浮层的背景颜色。
            borderColor: '#333', // 提示框浮层的边框颜色。
            borderWidth: 0, // 提示框浮层的边框宽。
            padding: 5, // 提示框浮层内边距，
            textStyle: { // 提示框浮层的文本样式。
              color: this.fontcolor,
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontFamily: 'sans-serif',
              fontSize: 14
            },
            formatter: function (params) {
              var relVal = params[0].name;
              let unitName = ''
              if (newData.unitName !== undefined) {
                unitName = newData.unitName || ''
              }
              for (var i = 0, l = params.length; i < l; i++) {
                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '' + unitName || ""
              }
              // console.log(relVal)
              return relVal;
            }
          },
          toolbox: {
            show: true
          },
          grid: {
            left: "3%",
            right: "20",
            bottom: 0,
            top: "10%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            // boundaryGap: false,
            boundaryGap: true,
            data: newData.xAxisdata,
            axisLabel: {
              interval: "auto",
              margin: 5,
              fontSize: 10,
              color: "#4381b5"
            },
            axisLine: {
              lineStyle: {
                color: '#4381b5'
              }
            }
          },
          yAxis: this.yAxis,
          calculable: true,
          legend: {
            show: false,
            orient: "horizontal",
            icon: "circle",
            bottom: 0,
            x: "center",
            data: newData.xData,
            axisLabel: {
              color: "#4381b5"
            },
            textStyle: {
              color: "##4381b5"
            }
          },
          series: newData.seriesData
        };
      },
      immediate: true,
      deep: true
    },
    // 应为最内层的高度固定为百分之百，所以写这里
    nowheight: {
      handler(e) {
        this.nowheight = e;
      },
      deep: true
    },
    // 监听y轴数据变化
    yAxis: {
      handler(e) {
        this.yAxis = e;
      },
      deep: true
    }
  },
  methods: {
    // 重置样式
    resetsty() {
      this.chartstau = false;
      this.$nextTick(() => {
        this.chartstau = true;
        console.log(this.chartstau, '------')
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
